<template>
	<view class="procure">
		<!-- 选项卡 -->
		<view class="tabs-wrap">
			<com-tabs gap="26rpx" padding="0 12rpx" :tabs="tabs" :active="params.order_status"
				@change="changeTab"></com-tabs>
		</view>

		<view class="lists">
			<block v-if="lists && lists.length">
				<view class="list-item" v-for="(item,index) in lists" :key="index" @click="goOrderInfo(item)">
					<view class="title">{{item.order_no}}</view>
					<view class="info-list">
						<view class="info-item">订单类型：{{item.pay_type === 0 ? '全款' : '定金'}}</view>
						<view class="info-item">订金金额：{{item.pay_deposit_fee | formatPrice($formatPrice)}}元</view>
						<view class="info-item">订单总金额：{{item.pay_total_fee | formatPrice($formatPrice)}}元</view>
						<view v-if="item.pay_type !== 0" class="info-item">已支付金额：{{item.have_pay_fee | formatPrice($formatPrice)}}元</view>
						<view class="info-item">待支付金额：{{item.unpaid_fee | formatPrice($formatPrice)}}元</view>
						<view class="info-item">订单状态：
							<view class="tags">
								<view v-if="item.order_status === -1" class="tag-item ">已取消</view>
								<view v-if="item.order_status === 1" class="tag-item tag-success">已完成</view>
								<view v-if="item.order_status === 2" class="tag-item tag-wait">待付款</view>
								<view v-if="item.order_status === 3" class="tag-item tag-wait">待确认</view>
								<view v-if="item.order_status === 4" class="tag-item tag-wait">待发货</view>
								<view v-if="item.order_status === 5" class="tag-item tag-wait">待收货</view>
							</view>
						</view>
					</view>
					<view v-if="item.unpaid_fee" class="" style="padding-top: 38rpx;">
						<button class="item-btn" @click.stop="agentPayCreate(item.gid, item.unpaid_fee)">继续支付</button>
					</view>
				</view>
			</block>

			<view v-else class="empty">暂无数据</view>
		</view>
		
		
		<view class="footer-btns">
			<button class="confirm" @click="goAddOrder">新增采购单</button>
		</view>
	</view>
</template>

<script>
	import formatPrice from '@/mixins/formatPrice.js';
	
	export default {
		mixins:[formatPrice],
		data() {
			return {
				tabs: [],
				params: {
					limit: 10, // string 每页条数 可选 示例值: 10
					page: 1, // string  当前页数 可选 示例值: 1
					key: '', // string  订单号/产品 可选
					order_status: 0, // 订单状态：0全部/2待付款/3待确认/4待发货/5待收货/1已完成/-1已取消
				},
				lists: [],
				more: true,	// 是否还有更多
				loading: true, // 是否正在加载
			};
		},
		onShow() {
			this.getData()
			this.getAgentOrderStatusData()
		},
		onReachBottom() {
			if (this.more) {
				this.getList()
			}
		},
		methods: {
			getAgentOrderStatusData() {
				this.$api.agentOrderStatusDataApi().then(res=> {
					console.log('res', res);
					this.tabs = res.data.map(item => ({
						label: item.title,
						value: item.name,
						count: item.count,
						show: item.show,
					}))
					if (!this.params.order_status) {
						this.params.order_status = this.tabs[0].value
					}
					
				}).catch(err=> {
					console.log('err', err);
				})
			},
			// 前往添加采购单
			goAddOrder() {
				uni.navigateTo({
					url: '/pages/agent/procure/add-order/add-order'
				})
			},
			// 前往订单详情
			goOrderInfo(item) {
				uni.navigateTo({
					url: '/pages/agent/procure/order-info/order-info?orderId='+item.gid
				})
			},
			changeTab(value) {
				this.params.order_status = value
				this.getData()
			},
			getData() {
				this.params.page = 1
				this.getList()
			},
			// 获取订单列表
			getList() {
				this.$api.agentOrderListApi(this.params).then(res => {
					if (this.params.page === 1) {
						this.lists = []
					}
					if (res.data.length === 0 || res.data.length < this.params.limit) {
						this.more = false
					} else {
						this.more = true
						this.params.page++
					}
					const oldList = [...this.lists]
					this.lists = [...oldList, ...res.data]
					// this.lists = res.data
				}).catch(err => {
					console.log('err', err);
				}).finally(()=> {
					this.loading = false
				})
			},
			// 支付
			async agentPayCreate(gid, unpaid_fee) {
				const { code } = await uni.login()
				const params = {
					appid: this.$store.state.common.appid, // string 必需 微信小程序appid
					order_gid: gid, // string 订单gid 必需 示例值: 71e3f23b-b20d-4877-b32a-b2fd23a7ddc8
					code: code, // string  必需 wx.login中的code
					order_price: unpaid_fee, // number 订单支付金额 必需 示例值: 1332
				}
				this.$api.agentPayCreateApi(params).then(res=> {
					uni.requestPayment({
					    provider: "wxpay",
					    orderInfo: {},
						...res.data,
					    success: (res)=> {
							console.log('res', res);
							this.getData()
						},
					    fail: (err)=> {
							console.log('err', err);
						}
					})
				}).catch(err=> {
					console.log('err', err);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.tabs-wrap {
		position: sticky;
		top: 0;
		z-index: 999;
		padding: 0 32rpx;
		background-color: #FFFFFF;
	}
	
	.procure {
		padding-bottom: calc(200rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		padding-bottom: calc(200rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/

		.lists {
			padding: 32rpx 32rpx;

			.list-item {
				padding: 32rpx;
				margin-bottom: 32rpx;
				border-radius: 26rpx;
				background-color: #FFFFFF;
			}

			.title {
				color: #000000;
				font-size: 34rpx;
				font-weight: 400;
				text-align: left;
				line-height: 46rpx;
			}

			.info-list {
				gap: 8rpx;
				display: flex;
				padding-top: 18rpx;
				flex-direction: column;
			}

			.info-item {
				color: #999999;
				font-size: 26rpx;
				text-align: left;
				font-weight: 400;
				line-height: 36rpx;

				display: flex;
				align-items: center;
			}

			.tags {
				display: flex;
				align-items: center;
				gap: 10rpx;
			}

			.tag-item {
				display: flex;
				align-items: center;
				justify-content: center;

				padding: 4rpx 8rpx;
				border-radius: 8rpx;
				background-color: #868686;

				color: #FFFFFF;
				font-size: 18rpx;
				font-weight: 400;
				line-height: 24rpx;
				text-align: left;
			}

			.tag-success {
				background-color: #009D6E;
			}

			.tag-complate {
				background-color: #D4D4D4;
			}

			.tag-wait {
				background-color: #003D99;
			}

			.item-btn {
				padding: 0;
				margin: 0;
				height: 62rpx;
				border-radius: 26rpx;
				background: var(--gradient-color-vertical);

				display: flex;
				align-items: center;
				justify-content: center;

				&::after {
					border: none;
				}

				color: #FFFFFF;
				font-size: 28rpx;
				font-weight: 400;
				line-height: 38rpx;
				text-align: left;
			}
		}
	}
	
	.footer-btns {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		z-index: 999;
		padding: 20rpx 32rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		box-shadow: 0px 0px 33rpx rgba(0, 0, 0, 0.05);
		padding-bottom: calc(20rpx + constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
	
		gap: 14rpx;
		display: flex;
		align-items: center;
	}
</style>